<template>
  <div class="w-full">
    <div class="flex justify-between px-[12px]">
      <div>
        <div class="text-[18px] font-bold text-title">{{ musicName }}</div>
        <div class="text-[12px] text-subtitle">{{ info?.shijiName }}</div>
      </div>
      <div>
        <ShouCangVue />
      </div>
    </div>
    <!--      进度条  -->
    <div class="d-flex justify-center" @pointerdown="handleSliderWrapTouchStart" @pointerup="handleSliderWrapTouchEnd">
      <v-slider
        aria-label="滑动条"
        :max="100"
        :min="0"
        @start="sliderStart"
        @end="sliderEnd"
        :model-value="playView?.sliderVal"
        @update:model-value="sliderChange"
        v-if="reset"
      >
        <template v-slot:prepend
          ><span class="text-sm">{{ playView.currentDuration }}</span></template
        >
        <template v-slot:append
          ><span class="text-sm">{{ playView.duration }}</span></template
        >
      </v-slider>
    </div>
    <!--      播放控制 -->
    <div class="d-flex justify-space-around items-center">
      <v-btn
        icon
        color="primary"
        @click="switchState"
        :aria-label="`播放模式切换，当前状态${playSortVal(playView.playSort)}。`"
        aria-live="true"
        variant="text"
      >
        <j-icon :size="35">{{ playView.playSort }}</j-icon>
      </v-btn>
      <v-btn aria-label="上一首按钮" icon color="primary" variant="text" @click="prve">
        <j-icon :size="40">{{ playView.playprev }}</j-icon></v-btn
      >

      <v-btn aria-label="播放按钮" v-if="src" icon color="primary" @click="play" variant="text">
        <j-icon :size="40" v-if="!paused">mdi-pause-circle</j-icon>
        <j-icon :size="40" v-else>mdi-play-circle</j-icon>
      </v-btn>
      <v-chip aria-label="暂无音频" v-else>暂无音频</v-chip>

      <v-btn aria-label="下一首按钮" icon color="primary" @click="next" variant="text">
        <j-icon :size="40">{{ playView.playnext }}</j-icon>
      </v-btn>

      <v-btn
        aria-hidden="true"
        aria-label="赞美列表页弹窗按钮"
        icon
        color="primary"
        @click="handleGedanVisable"
        variant="text"
      >
        <j-icon :size="40">{{ playView.playlist }}</j-icon></v-btn
      >
    </div>

    <!-- 工具条 -->

    <div class="flex justify-between w-full">
      <DownMusicVue :url="src" :musicName="musicName" />
      <CopyTxetVue :text="lyric.join('\n')" />
      <v-btn aria-label="歌谱" role="button" v-if="gepuUrl" variant="text" icon @click="toGePuPage(gepuUrl)">谱</v-btn>
      <v-btn aria-label="歌谱" role="button" v-if="enGePuUrl" variant="text" icon @click="toGePuPage(enGePuUrl)"
        >en谱</v-btn
      >
      <v-btn v-if="pptUrl" icon variant="text" @click="toPPT">PPT</v-btn>

      <v-btn icon aria-label="搜索" @click="router.push({ name: 'seacherSgb' })" variant="text">
        <j-icon size="20">search</j-icon>
      </v-btn>
    </div>
  </div>
  <BootomList ref="bottomListRef" @bootomlistclick="handlerBootomListClick" />
  <imgDialog ref="imgDialogRef" :alt="info.mulu"></imgDialog>
</template>
<script lang="ts" setup name="PlayCon">
import BootomList from "@/components/BootomList/index.vue";
import AudioList from "@/utils/audio-list/main";
import { useAudio } from "@/hooks/useAudio";
import { useTabsWindow } from "@/hooks/useTabsWindow";
import DownMusicVue from "@/components/DownMusic.vue";
import CopyTxetVue from "@/components/CopyTxet.vue";
import ShouCangVue from "@/components/ShouCang.vue";
import ImgDialog from "@/components/ImgDialog.vue";
import { computed, onMounted, ref, useTemplateRef } from "vue";
import { useEventListener } from "@vueuse/core";
import { useRouter } from "vue-router";
import { $toast } from "@/utils/utils";
const { info, prve, next, play, paused, playView, audio, pause, musicName } = useAudio();
const stabsWindowRef = useTabsWindow();
const playState = ref(false); // 滑块拖动音频暂停之前的状态
const reset = ref(true); // 滑块重置参数
const router = useRouter();
const emit = defineEmits(["showGePu", "showPPT", "sharelyric", "sliderStart", "sliderEnd", "init"]);
const src = computed(() => info.value?.dmtUrl?.adUrl);
const bottomListRef = useTemplateRef("bottomListRef");
const imgDialogRef = useTemplateRef("imgDialogRef");

const lyric = computed(() => {
  if (info.value.lyric) {
    const { lyric } = info.value;
    if (lyric === "") return ["暂无歌词"];
    return `${musicName.value}\n${info.value.lyric}`.split("\n");
  }
  return ["暂无歌词"];
});
const enGePuUrl = computed(() => {
  if (info.value.dmtUrl) {
    const { dmtUrl } = info.value;
    const { enGePuUrl } = dmtUrl;

    if (enGePuUrl !== "") {
      return enGePuUrl;
    }
    return "";
  }
  return "";
});

const gepuUrl = computed(() => {
  if (info.value.dmtUrl) {
    const { dmtUrl } = info.value;
    const { gepuUrl } = dmtUrl;
    if (gepuUrl !== "") {
      return gepuUrl;
    }
    return "";
  }
  return "";
});

const pptUrl = computed(() => {
  if (info.value.dmtUrl) {
    const { dmtUrl } = info.value;
    const { pptUrl } = dmtUrl;
    if (pptUrl !== "") {
      return pptUrl;
    }
    return "";
  }
  return "";
});

const pdfUrl = computed(() => {
  if (info.value.dmtUrl) {
    const { dmtUrl } = info.value;
    const { pdfUrl } = dmtUrl;
    if (pdfUrl !== "") {
      return pdfUrl;
    }
    return "";
  }
  return "";
});

onMounted(() => {
  sliderReset();
});
function toGePuPage(url: string) {
  lyricShow(url, pdfUrl.value);
}
function toPPT() {
  lyricShow(pptUrl.value);
}

function handleSliderWrapTouchStart() {
  if (stabsWindowRef?.value) {
    stabsWindowRef?.value?.disable();
  }
}
function handleSliderWrapTouchEnd() {
  if (stabsWindowRef?.value) {
    stabsWindowRef?.value?.enable();
  }
}
const playSortVal = computed(() => {
  return (val: string) => {
    let res = "";
    switch (val) {
      case "fa-random":
        res = "随机播放";
        break;
      case "fa-sort":
        res = "顺序播放";
        break;
      case "fa-undo":
        res = "单曲循环";
        break;
      case "loop":
        res = "列表循环";
        break;
      case "queue-stop":
        res = "播放完停止";
        break;
    }
    return res;
  };
});
// 切换当前播放状态
function switchState() {
  AudioList.audioList.changeMode();
  $toast.success(playSortVal.value(playView.value.playSort));
}

function sliderChange(val: number) {
  const { duration } = audio.value.ad;
  const currentTime = (duration * val) / 100 || 0;
  audio.value.ad.currentTime = currentTime;
}
function sliderEnd() {
  emit("sliderEnd");
  if (playState.value) return;
  play(); // 开始播放
}
function sliderReset() {
  reset.value = false;
  // slider控件有点bug,延时加载重置
  setTimeout(() => {
    reset.value = true;
    emit("init");
  }, 300);
}

function sliderStart() {
  emit("sliderStart");
  // 滑块开始滑动
  playState.value = paused.value;
  pause(); // 暂停播放
}
useEventListener("keydown", keyWord);
function keyWord(event: KeyboardEvent) {
  if (event.code === "Space") {
    play();
  } else if (event.code === "ArrowLeft") {
    prve();
  } else if (event.code === "ArrowRight") {
    next();
  }
}

function handlerBootomListClick(_: any, index: number) {
  AudioList.audioList.setCurrentIndex({ index });
}
// 底部列表的显示和隐藏赋值
function handleGedanVisable() {
  bottomListRef.value.open();
}
function lyricShow(url: string, pdfUrl?: string) {
  imgDialogRef.value?.open(url, pdfUrl);
}
</script>
